<template>
    <Select v-model="roleValue"
            :clearable="clearable"
            :multiple='multiple'
            :filterable='filterable'
            :placeholder='placeholder'
            :style="{width:width+'px'}"
            @on-change="changeDict">
        <Option v-for="item in roleList" :value="item.enname" :key="item.enname">{{item.name}}</Option>
    </Select>
</template>

<script>
    import {postAction} from '@/api/request'

    export default {
        name: 'roleSelect',
        props: {
            value: {
                type: String,
                default: ''
            },
            multiple: { //是否支持多选
                type: Boolean,
                default: false
            },
            filterable: { //是否支持搜索,多选搜索时，可以使用键盘Delete快捷删除最后一个已选项
                type: Boolean,
                default: false
            },
            clearable: {//是否可以清空选项，只在单选时有效
                type: Boolean,
                default: false
            },
            placeholder: {
                type: String,
                default: '请选择'
            },
            width: {
                type: Number,
                default: 200
            }
        },
        data() {
            return {
                roleValue: this.value,
                roleList: [],
            };
        },
        created() {
            if (this.multiple) {
                //多选string转array
                this.roleValue = this.roleValue.split(',');
            }
            this.initDictData();
        },
        model: {
            prop: 'value',
            event: 'change'
        },

        methods: {
            //获取数据
            initDictData() {
                this.getList();
            },
            //获取字典信息
            getList() {
                var that = this;
                if (sessionStorage.getItem("sys_role_list")) {
                    this.roleList = JSON.parse(sessionStorage.getItem("sys_role_list"));
                } else {
                    postAction('/api/ac/subsistence/sysRoleServiceImpl/roleList', {}).then((res) => {
                        if (res.data.errcode == 0) {
                            that.roleList = res.data.data;
                            sessionStorage.setItem("sys_role_list", JSON.stringify(that.roleList));
                        }
                    })
                }
            },
            changeDict(e) {
                if (this.multiple) {
                    //多选操作array转string
                    e = e.toString();
                }
                this.$emit('change', e)
            }
        },
    }
</script>
<style scoped>
</style>
